/**
 * 用户管理模块
 * @author xiaoxujs
 */

import Search from "../../../components/Search";
import { Guangdian, RolePageBox, RolePageHeaderBox, RolePageListBox } from "./style";
import ButtonAddX from '../../../components/ButtonAddX'; //添加按钮
import ButtonLinkX from '../../../components/ButtonLinkX'; // 操作按钮
import DrawerAddChange from "./components/DrawerAddChange"; // 添加角色抽屉
import PaginationX from "../../../components/PaginationX"; // 分配权限抽屉

import { useCallback, useEffect, useState } from "react";
import { IFenye } from "../../../type/common";
import PitModal from "../../../components/PitModal";
import { ISyhtUserGetPageUser, ISyhtUserGetPageUserParams } from "../../../type/ConfigManagement/UserPage/api";
import { getSyhtUserDeleteUser, postSyhtUserGetPageUser } from "../../../api/ConfigManagement/userPageApi";



const UserPage = () => {
    const [drawerAddChangeShow, setDrawerAddChangeShow] = useState(false); // 添加用户抽屉
    const [listData, setListData] = useState<ISyhtUserGetPageUser[]>([]); // 列表数据
    const [pading, setPading] = useState({
        size: 10, // 每页条数
        currentPage: 1, // 当前页码

    })
    const [total, setTotal] = useState(0); // 总条数
    const [clickId, setClickId] = useState<string>(); //点击获取角色ID
    const [deleteMoudleShow, setDeleteMoudleShow] = useState(false); // 删除弹窗显示隐藏
    const [deleteId, setDeleteId] = useState<string>(); // 删除ID
    const [searchValue, setSearchValue] = useState<string>(''); // 检索值
    const listFun = useCallback(
        async (params: ISyhtUserGetPageUserParams) => {
            const { code, msg, data } = await postSyhtUserGetPageUser(params) as IFenye<ISyhtUserGetPageUser>;
            if (code === 200) {
                setListData(data.records)
                setPading({
                    currentPage: Number(data.current),
                    size: Number(data.size)
                });
                setTotal(Number(data.total))
            } else {
                alert(msg)
            }
        },
        [],
    )
    useEffect(() => {
        const params = {
            size: 10,
            currentPage: 1,
        }
        listFun(params)
    }, [listFun])



    // 检索
    const handleSearch = (value: string) => {
        setSearchValue(value);
        const params = {
            size: 10,
            currentPage: 1,
            userName: value
        }
        listFun(params)

    }
    // handleDrawerAddChangeCloseCallback 关闭添加角色抽屉
    const handleDrawerAddChangeCloseCallback = () => {
        setClickId('');
        setDrawerAddChangeShow(false);
        const params = {
            size: 10,
            currentPage: 1,
        }
        listFun(params)
    }
    // 删除
    const handleDelete = (item: ISyhtUserGetPageUser) => {
        setDeleteMoudleShow(true);
        setDeleteId(item.userId);
    }
    //  删除回调
    const handleDeleteCallback = async (type: 'ok' | 'cancel') => {
        if (type === 'ok') {
            if (deleteId) {
                const { code, msg } = await getSyhtUserDeleteUser({ userId: deleteId }) as { code: number, msg: string }; // 删除用户
                if (code === 200) {
                    alert('用户删除成功')
                    setDeleteMoudleShow(false); // 关闭弹窗
                    setDeleteId(''); // 清空ID
                    const params = {
                        size: pading.size,
                        currentPage: pading.currentPage,
                        userName: searchValue
                    }
                    listFun(params); // 重新获取树形图数据  
                } else {
                    alert(msg)
                }
            }
        } else {
            setDeleteMoudleShow(false); // 关闭弹窗
            setDeleteId(''); // 清空ID
        }
    }

    // 分页
    const handlePaginationChange = (current: number, pageSize: number) => {
        const params = {
            size: pageSize,
            currentPage: current,
            roleName: searchValue
        }
        listFun(params)
    }
    return <RolePageBox>
        <RolePageHeaderBox>
            <div className="left">
                <div className="left_left_jiantou"></div>
                <div>全部列表</div>
                <div className="left_right_jiantou"></div>
            </div>
            <div className="right">
                <Search placeholder="请搜索关键字" searchChange={(value) => handleSearch(value)} />
                <ButtonAddX style={{ marginLeft: '3rem' }} onClick={() => setDrawerAddChangeShow(true)}  >
                    新增用户
                </ButtonAddX>
            </div>
        </RolePageHeaderBox>
        <RolePageListBox>
            <table>
                <thead>
                    <tr>
                        <th><div><Guangdian />序号</div></th>
                        <th><div><Guangdian />用户名</div></th>
                        <th><div><Guangdian />用户类型</div></th>
                        <th><div><Guangdian />操作</div></th>
                    </tr>
                </thead>
                <tbody>
                    {
                        listData.map((item, index) => <tr key={item.userId}>
                            <td><div className="td_div_style">{index + 1}</div></td>
                            <td><div className="td_div_style">{item.userName}</div></td>
                            <td><div className="td_div_style">{item.userType}</div></td>
                            <td>
                                <div className="button">
                                    <ButtonLinkX style={{ marginRight: '1rem' }} onClick={() => {
                                        setClickId(item.userId);
                                        setDrawerAddChangeShow(true);
                                    }}>
                                        编辑
                                    </ButtonLinkX>
                                    <ButtonLinkX style={{ marginRight: '1rem' }} onClick={() => handleDelete(item)}>
                                        删除
                                    </ButtonLinkX>
                                </div>
                            </td>
                        </tr>)
                    }


                </tbody>
            </table>
            <PaginationX current={pading.currentPage} pageSize={pading.size} total={total} onChange={handlePaginationChange} />
        </RolePageListBox>
        <DrawerAddChange userId={clickId} open={drawerAddChangeShow} onClose={() => handleDrawerAddChangeCloseCallback()} />
        <PitModal message={'确定删除当前用户吗？'} open={deleteMoudleShow} type='delete' onClose={handleDeleteCallback} />

    </RolePageBox>
}

export default UserPage;